<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>cesium案例</title>
  <link rel="stylesheet" href="./libs/Widgets/widgets.css" />
  <script src="./libs/Cesium.js"></script>
  <script src="./utils/tranformCoord.js"></script>
  <script src="./script/classLib/LineFlickerMaterialProperty.js"></script>
  <script src="./data/beijing.js"></script>
  <script src="./script/createTdtImageryProvider.js"></script>
  <script src="./script/initMap.js"></script>
  <script src="./script/createBuilds.js"></script>
  <script src="./script/createLines.js"></script>
  <script src="./script/createQianXi.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .fullSize,
    html,
    body {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer" class="fullSize"></div>
</body>
<script>
  const viewer = initMap()
  // 加载天地图瓦片图层
  // const imageryProvider = createTdtImageryProvider({
  //   layer: "vec",
  //   appKey: "a542c11fcfe7d660e1675aac9b66553c",
  // })
  //接下来我们就要对这个图层进行处理
  // const layer = viewer.imageryLayers.addImageryProvider(imageryProvider)
  // layer.hue = 3 // 图层色调
  // layer.contrast = -1.5 // 图层对比度

  // 加载模型
  createBuilds(viewer)
  // 加载路网
  createLines(viewer)
  // 加载迁徙图
  createQianXi(viewer)

  const selected = {
    feature: undefined,
    originalColor: new Cesium.Color(),
  }

  // 创建一个检测边缘的后处理阶段
  const silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage()
  silhouetteBlue.uniforms.color = Cesium.Color.BLUE
  silhouetteBlue.uniforms.length = 0.01
  silhouetteBlue.selected = []
  viewer.scene.postProcessStages.add(
    Cesium.PostProcessStageLibrary.createSilhouetteStage([
      silhouetteBlue
    ])
  )
  // 鼠标滑过选中
  let handlerMove = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  handlerMove.setInputAction(function(movement) {
    silhouetteBlue.selected = []
    // 返回具有' primitive'属性的对象，该对象包含场景中的第一个（顶部）基本体在特定的窗口坐标处；如果位置不存在，则为undefined
    const pickedFeature = viewer.scene.pick(movement.startPosition)
    if (!Cesium.defined(pickedFeature)) {
      return
    }
    if (pickedFeature !== selected.feature) {
      silhouetteBlue.selected = [pickedFeature]
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

  // 事件
  let handlerClick = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  handlerClick.setInputAction(function(event) {
    let cartesian = viewer.camera.pickEllipsoid(event.position)
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian)
    let lng = Cesium.Math.toDegrees(cartographic.longitude) // 经度
    let lat = Cesium.Math.toDegrees(cartographic.latitude) // 纬度
    let alt = cartographic.height // 高度，椭球面height永远等于0
    let coordinate = {
        longitude: Number(lng.toFixed(6)),
        latitude: Number(lat.toFixed(6)),
        altitude: Number(alt.toFixed(2))
    };
    console.log(coordinate)
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
</script>

</html>